<template>
  <div>
    <el-dialog :visible="showNewContructDialog" @close="btnCancel">
      <el-form ref="refForm" :model="formData" :rules="rulesForm">
        <el-form-item label="用户名" label-width="100px" prop="username">
          <!-- <el-select v-model="value" placeholder="请选择" style="width:400px;" @change="getNewUserList">
            <el-option
              v-for="item in newOptions"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select> -->
          <el-input v-model="formData.username" style="width:400px;" />
        </el-form-item>
        <el-form-item label="手机号" label-width="100px" prop="phone">
          <el-input v-model="formData.phone" style="width:400px;" />
        </el-form-item>
        <el-form-item label="商圈店铺数量" label-width="100px" prop="storeCount">
          <el-input v-model="formData.storeCount" style="width:400px;" />
        </el-form-item>
        <el-form-item label="订单数量" label-width="100px" prop="orderCount">
          <el-input v-model="formData.orderCount" style="width:400px;" />
        </el-form-item>
        <el-form-item label="消费额" label-width="100px" prop="saleCount">
          <el-input v-model="formData.saleCount" style="width:400px;" />
        </el-form-item>
        <el-form-item label="消费频次" label-width="100px" prop="pinci">
          <el-input v-model="formData.pinci" style="width:400px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">重置</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入获取个人商圈表单数据的接口
// import { addMystore } from '@/api/shareStore.js';
export default {
  props: {
    showNewContructDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 表单下拉数据
      newOptions: [],
      value: '',
      //   表单数据源
      formData: {
        username: '',
        phone: '',
        storeCount: '',
        orderCount: '',
        saleCount: '',
        pinci: '',
      },
      // 定义表单校验规则
      rulesForm: {
        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
        phone: [{ required: true, trigger: 'blur', message: '手机号不能为空' }, {
          pattern: /^1[3|5|7|8]\d{9}$/,
          message: '手机号格式不正确',
        }],
        storeCount: [{ required: true, trigger: 'blur', message: '商铺数量不能为空' }],
        orderCount: [{ required: true, trigger: 'blur', message: '订单数量不能为空' }],
        saleCount: [{ required: true, trigger: 'blur', message: '销售额不能为空' }],
        pinci: [{ required: true, trigger: 'blur', message: '消费频次不能为空' }],
      },
    };
  },
  // created() {
  //   this.getMyStore();
  // },
  // mounted() {
  //   this.getMyStore();
  // },
  methods: {
    // 获取个人商圈表单数据
    // async getMyStore() {
    //   const { data } = await myStore();
    //   data.forEach(item => {
    //     const name = {};
    //     name.id = item.id;
    //     name.username = item.username;
    //     this.newOptions.push(name);
    //   });
    // //   console.log(this.newOptions);
    // },
    async btnOK() {
      // 点击确定调用编辑接口
      this.$refs.refForm.validate(valid => {
        if (valid) {
          this.$emit('addmyStore', this.formData);
        }
      });
      this.$emit('update:showNewContructDialog', false);
    },
    btnCancel() {
      // 移除表单校验，并且清除数据
      this.$refs.refForm.resetFields();
      this.formData = {
        username: '',
        phone: '',
        storeCount: '',
        orderCount: '',
        saleCount: '',
        pinci: '',
      };
      this.$emit('update:showNewContructDialog', false);
    },
    // async getNewUserList(label) {
    // //   console.log(label);
    //   const { data: users } = await myStore();
    //   //   console.log(users);
    //   const user = users.find(item => {
    //     return item.id === label;
    //   });
    //   //   console.log(user);
    //   //   this.formData.username = user.username;
    //   //   this.formData.phone = user.phone;
    //   //   this.formData.storeCount = user.storeCount;
    //   //   this.formData.orderCount = user.orderCount;
    //   //   this.formData.saleCount = user.saleCount;
    //   //   this.formData.pinci = user.pinci;
    //   this.formData = user;
    // },
  },
};
</script>

<style lang="scss" scoped>
.huangxing-echart{
    width: 600px;
    height:400px;
}
</style>
